<template>
  <div class="home">
    <!-- 背景图 -->
    <div class="back_img"></div>
    <div class="swiper">
      <img class="swiper_img" src="~assets/img/banner@2x.png" alt />
    </div>
    <!-- 公告区域 -->
    <div class="announ" @click="$router.push({name:'Notice', query:{id: newNotice.id}})">
      <div class="announ_fl">
        <img class="announ_fl_img" src="~assets/img/an@2x.png" alt />
        <span>公告</span>
      </div>
      <div class="announ_con">
        <van-notice-bar
          background="#f7f9fb"
          color="#869BAD"
          scrollable
          :text="newNotice.notice_content"
        />
      </div>
      <div class="announ_fr">
        <img class="announ_img" src="~assets/img/home_arrow@2x.png" alt />
      </div>
    </div>
    <!-- 导航 -->
    <nav-bar :navList="navList"></nav-bar>
    <!-- 咨询导航 -->
    <advisory-nav class="advisory-nav">
      <div slot="left">
        <span>山体资讯</span>
      </div>
      <div slot="right">
        <img class="advisory_img" src="~assets/img/home_arrow@2x.png" alt />
      </div>
    </advisory-nav>
    <!-- 山体列表信息 -->
    <info-list :articleList="articleList"></info-list>
    <!-- 其他服务 -->
    <advisory-nav class="advisory-nav">
      <div slot="left">
        <span>其他服务</span>
      </div>
    </advisory-nav>
    <!-- 底部监督 -->
    <Footer></Footer>
    <router-view></router-view>
  </div>
</template>

<script>
import NavBar from "./child/NavBar";
import AdvisoryNav from "./child/AdvisoryNav";
import InfoList from "./child/InfoList";
import Footer from "./child/Footer";
import {
  getIndexList,
  getNav,
  getNewNotice,
  getUserInfo,
  authLogin,
} from "api/home";
export default {
  components: {
    NavBar,
    AdvisoryNav,
    InfoList,
    Footer,
  },
  data () {
    return {
      navList: [],
      // 山体列表
      articleList: [],
      // 首页公告
      newNotice: "",
    };
  },
  methods: {},
  mounted () {
    // 判断当前地址code
    if (window.location.href.indexOf("code=") != -1) {
      getUserInfo(
        window.location.href.split("?")[1].split("=")[1].split("&")[0]
      ).then((res) => {
        if (res.code == 200) {
          localStorage.setItem("openid", res.data);
        }
      });
    } else {    
      // 判断是否存在openid
      if ( !localStorage.getItem("openid") ) { 
        authLogin(window.location.href).then((res) => {
          if (res.code == 200) {
            window.location.href = res.data;
          }
        });
      }
    }

    this.$axios
      .all([getIndexList(), getNav(), getNewNotice()])
      .then(
        this.$axios.spread((acct, perms, notice) => {
          if (acct.code == 200 && perms.code == 200 && notice.code == 200) {
            this.articleList = acct.data.data;
            this.navList = perms.data;
            this.newNotice = notice.data;
          }
        })
      )
      // .catch(function (err) {
      //   this.$toast({
      //     message: error,
      //   });
      // });
  },
  beforeRouteEnter (to, from, next) {
    let u = navigator.userAgent;
    let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    // XXX: 修复iOS版微信HTML5 History兼容性问题
    if (isiOS && to.path !== location.pathname) {
      // 此处不可使用location.replace
      location.replace(to.fullPath);
    } else {
      next();
    }
  },
};
</script>

<style lang="less" scoped>
.home {
  padding: 0 16px;
  height: 100%;
}
// 顶部背景图
.back_img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: url('~assets/img/home_bg@2x.png') no-repeat;
  background-size: 100% 100%;
}
// 轮播图
.swiper {
  position: relative;
  margin-top: 40px;
  height: 160px;
  .swiper_img {
    width: 100%;
  }
}
// 公告
.announ {
  display: flex;
  margin-top: 20px;
  height: 40px;
  line-height: 35px;
  background: #f7f9fb;
  .announ_fl {
    width: 74px;
    .announ_fl_img {
      margin: 0 8px;
      width: 18px;
      height: 13px;
    }
  }
  .announ_con {
    flex: 1;
  }
  .announ_fr {
    width: 40px;
    .announ_img {
      width: 12px;
      height: 12px;
    }
  }
}
// 导航栏
.nav_bar {
  margin-top: 20px;
}
// 咨询导航
.advisory-nav {
  margin: 20px 0;
  font-size: 16px;
  span:before {
    margin-right: 16px;
    content: '.';
    color: #28c08d;
    display: inline-block;
    width: 4px;
    height: 20px;
    background: linear-gradient(#2db88f 0%, #28c08d 99%);
  }
  .advisory_img {
    width: 12px;
    float: right;
  }
}
</style>